<!--<template>-->
<!--    <div class="banner" style="display: flex">-->
<!--        <ul class="banner-list">-->
<!--            <Transition :name="isPrev?'prev':'fade'" v-for= "(item,index) in imgs" style="display: flex">-->
<!--                <li class="banner-item" v-show="index===currentIndex">-->
<!--                    <img :src="item" class="img-resize" alt="">-->
<!--                </li>-->
<!--            </Transition>-->
<!--        </ul>-->
<!--        <div class="arrow prev" @click="throttlePrev">&larr;</div>-->
<!--        <div class="arrow next" @click="throttleNext">&rarr;</div>-->

<!--    </div>-->

<!--</template>-->

<!--<script lang="ts" setup>-->
<!--import {ref,reactive}from'vue'-->
<!--const imgs=reactive([-->
<!--    new URL('@/assets/image/img1.png',import.meta.url).href,-->
<!--    new URL('@/assets/image/img_1.png',import.meta.url).href,-->
<!--    new URL('@/assets/image/img_2.png',import.meta.url).href,-->
<!--    new URL('@/assets/image/img_3.png',import.meta.url).href,-->
<!--    new URL('@/assets/image/img_4.png',import.meta.url).href,-->
<!--])-->
<!--let currentIndex=ref(0)-->
<!--let isPrev=ref(false)-->
<!--let isClick=ref(false)-->
<!--function throttle(fn:any,time:number){-->
<!--    isClick.value=true-->
<!--    return function () {-->
<!--        if (isClick.value) {-->
<!--            fn()-->
<!--            isClick.value = false-->
<!--            setTimeout(function () {-->
<!--                isClick.value = true-->
<!--            }, time)-->
<!--        }-->
<!--    }-->
<!--}-->
<!--const next=()=>{-->
<!--    isPrev.value=false-->
<!--    currentIndex.value++-->
<!--    if (currentIndex.value>5){-->
<!--        currentIndex.value=0-->
<!--    }-->
<!--}-->
<!--const prev=()=>{-->
<!--    isPrev.value=true-->
<!--    currentIndex.value&#45;&#45;-->
<!--    if (currentIndex.value<0){-->
<!--        currentIndex.value=5-->
<!--    }-->
<!--}-->
<!--const throttleNext=throttle(next,500)-->
<!--const throttlePrev=throttle(prev,500)-->
<!--</script>-->

<!--<style lang="scss" scoped>-->
<!--.banner{-->
<!--    width: 590px;-->
<!--    height: 340px;-->
<!--    margin: 20px auto;-->
<!--    position: relative;-->
<!--}-->
<!-- .banner.banner-list.banner-item{-->
<!--    position: absolute;-->
<!--}-->
<!--.arrow{-->
<!--    color: white;-->
<!--    width: 30px;-->
<!--    height: 40px;-->
<!--    background-color: rgba(0,0,0,.5);-->
<!--    font-size: 20px;-->
<!--    text-align: center;-->
<!--    cursor: pointer;-->
<!--    position: absolute;-->
<!--    top: 50%;-->
<!--    transform: translateY(-50%);-->
<!--}-->
<!--.banner.next{-->
<!--    right: 0;-->
<!--}-->
<!--.fade-enter-active,.fade-leave-active{-->
<!--    transition: all 0.5s linear;-->
<!--}-->
<!--.fade-enter-to{-->
<!--    transform: translate(0, 0);-->
<!--}-->
<!--.fade-enter-from,.fade-leave-to{-->
<!--    transform: translateX(100%);-->
<!--}-->
<!--.fade-leave-to{-->
<!--    transform: translateX(-100%);-->
<!--}-->
<!--.img-resize{-->
<!--    width: 200px;-->
<!--    height: 200px;-->
<!--}-->
<!--</style>-->
<template>

</template>
<script>

</script>